<script lang="ts">
    import { page } from "$app/stores";

    import { tooltip } from "$lib/js/tooltip";
    export let selected = "part1";
    export let display_mode = "List";
</script>

<div class="w-full flex flex-row">
    <nav class="w-16 bg-gray-400">
        <div>navig ation bar</div>
        <ol class="item-center">
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
            <li class="h-12 w-12 m-2 cursor-pointer bg-gray-300">Icon1</li>
        </ol>
    </nav>

    <div class="grow pr-4 overflow-scroll">
        <div class="mb-4">
            <div class="flex flex-row mx-2">
                <h1
                    class="flex-none text-green-500 my-4 text-4xl font-extrabold"
                >
                    My Assets Universe
                </h1>
                <div
                    class="grow  my-4 mx-4 flex flex-nowrap items-stretch w-full mb-4"
                >
                    <input
                        type="search"
                        class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                        placeholder="Search in My Assets List University"
                        aria-label="Search"
                        aria-describedby="button-addon2"
                    />
                </div>
                <span
                    class="flex-none my-4 text-4xl font-extrabold {display_mode ==
                    'List'
                        ? 'text-rose-500'
                        : 'text-gray-500'} cursor-pointer mx-2"
                    on:click={(event) => {
                        display_mode = "List";
                    }}
                >
                    List
                </span>
                <span
                    class="flex-none my-4 text-4xl font-extrabold  {display_mode ==
                    'Tile'
                        ? 'text-rose-500'
                        : 'text-gray-500'} cursor-pointer"
                    on:click={(event) => {
                        display_mode = "Tile";
                    }}
                >
                    Tile
                </span>
            </div>
            <p class="mx-2">
                Value Line has been providing investment research since 1931.
                Value Line was built upon our founder's passion for discipline
                and objectivity as it applied to the basic analysis of a
                company's financial statements. Value Line University was
                created to help people take that same passion and apply it to
                their own investment portfolios.
                <a class="bg-blue-400 underline" href="https://htmldom.dev/create-resizable-split-views/">Create resizable split views</a>
                display_mode={display_mode}
            </p>
        </div>

        <div class="flex flex-row overflow-scroll  bg-gray-300">
            <div id="left" class="min-h-screen w-1/6 rounded-sm shadow-sm mx-2">
                Left Navigatio Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigationn Left Navigatio Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigationn Left Navigatio Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigationn Left Navigatio
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigationn
                Left Navigatio Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigationn Left Navigatio Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigationn Left Navigatio Left Navigation
                Left Navigation Left Navigation Left Navigation Left Navigation
                Left Navigation Left Navigation Left Navigationn
            </div>
            <div id="resizer1" class="bg-rose-500 w-2 cursor-pointer" data-direction="horizontal"></div>
            <div id="main" class="w-4/6 bg-white">
                <ul class="flex flex-row mx-2">
                    <li
                        id="part1"
                        class="relative flex-1  h-12 cursor-pointer {selected ===
                        'part1'
                            ? 'bg-rose-400'
                            : 'bg-cyan-300'}"
                        use:tooltip={{ theme: "material" }}
                        title="Market 1: My Assets"
                        on:click={(event) => {
                            selected = "part1";
                            console.log("got click home /", event);
                        }}
                    >
                        <span>All </span>
                        <span class="absolute top-0 right-1">2342</span>
                    </li>
                    <li
                        id="part2"
                        class="relative flex-1 mx-2 cursor-pointer  {selected ===
                        'part2'
                            ? 'bg-rose-400'
                            : 'bg-cyan-300'}"
                        use:tooltip={{ theme: "material" }}
                        title="Market 2: Investment Strategies"
                        on:click={(event) => {
                            selected = "part2";
                            console.log("got click home /", event);
                        }}
                    >
                        <span>Search Keyword: My Assets 2 </span>
                        <span class="absolute top-0 right-1">23</span>
                    </li>
                    <li
                        id="part3"
                        class="relative flex-1 mr-2 cursor-pointer  {selected ===
                        'part3'
                            ? 'bg-rose-400'
                            : 'bg-cyan-300'}"
                        use:tooltip={{ theme: "material" }}
                        title="Market 3: Building a Portfolio"
                        on:click={(event) => {
                            selected = "part3";
                            console.log("got click home /", event);
                        }}
                    >
                        <span>Search My Assets 3 </span>
                        <span class="absolute top-0 right-1">234</span>
                    </li>
                    <li
                        id="part4"
                        class="relative flex-1 cursor-pointer  {selected ===
                        'part4'
                            ? 'bg-rose-400'
                            : 'bg-cyan-300'}"
                        use:tooltip={{ theme: "material" }}
                        title="Market 4: Studying a Stock"
                        on:click={(event) => {
                            selected = "part4";
                            console.log("got click home /", event);
                        }}
                    >
                        <span>Search My Assets 4 </span>
                        <span class="absolute top-0 right-1">352</span>
                    </li>
                </ul>

                <div class="flex flex-wrap whitespace-nowrap mx-2 mb-2">
                    <div class="flex flex-row mt-2  mr-2  bg-gray-300">
                        <span>Dow1.svelte display_mode={display_mode}</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                    <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
                        <span class="">Category: Fashion Jewelry Bracelets & Bangles</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                    <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
                        <span>Dow1.svelte display_mode={display_mode}</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                    <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
                        <span>Category: Fashion Jewelry Bracelets & Bangles</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                    <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
                        <span>Dow1.svelte display_mode={display_mode}</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                    <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
                        <span>Category: Fashion Jewelry Bracelets & Bangles</span>
                        <button class="text-white mx-2">X</button>
                    </div>
                </div>

                <div class="mx-2 grid justify-center grid-cols-4 gap-2 mb-4">
                    {#each Array(20) as _, i}
                        <div class="rounded-lg shadow-lg bg-white max-w-sm">
                            <a
                                href="#!"
                                data-mdb-ripple="true"
                                data-mdb-ripple-color="light"
                            >
                                <img
                                    class="rounded-t-lg"
                                    src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
                                    alt=""
                                />
                            </a>
                            <div class="p-6">
                                <h5 class="text-gray-900 text-xl font-medium mb-2">
                                    Card title
                                </h5>
                                <p class="text-gray-700 text-base mb-4">
                                    Some quick example text to build on the card
                                    title and make up the bulk of the card's
                                    content.
                                </p>
                                <button
                                    type="button"
                                    class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                                >
                                    Button{i}
                                </button>
                            </div>
                        </div>
                    {/each}
                </div> 
            </div>
            <div id="resizer2" class="bg-rose-500 w-2 cursor-pointer" data-direction="horizontal"></div>
            <div
                id="right"
                class="min-h-screen w-1/6 rounded-sm shadow-sm bg-gray-300 ml-2"
            >
                Right Detail for the left selected/clicked item
            </div>
        </div>
    </div>
</div>
